import React from 'react';
import { observer } from 'mobx-react';
import Group from 'components/config/group';
import Range from 'components/config/range';
import Input from 'components/config/input';
import Color from 'components/config/color';
import Image from 'components/config/image';
import BGImageFillMode from 'components/config/backgroundImageFillMode';
import BaseConfig from 'modules/common/config';

@observer
export default class SliderPageConfig extends BaseConfig {
  title = '轮播内页设置';

  renderAttrConfig() {
    const { mod } = this.props;
    const groupProps = {
      defaultActiveKey: [0, 1, 2],
      list: [
        {
          title: '背景颜色设置',
          children: (
            <Color label="背景颜色"
                   color={mod.backgroundColor}
                   onChange={color => {
                     mod.update('backgroundColor', color.string);
                   }} />
          )
        },
        {
          title: '背景图案设置',
          children: (
            <Image
              src={mod.backgroundImage}
              onChange={src => {
                mod.update('backgroundImage', src);
              }} />
          )
        },
        {
          title: '背景图案属性',
          children: (
            <div>
              <BGImageFillMode
                value={mod.backgroundImageFillMode}
                onChange={val => {
                  mod.update('backgroundImageFillMode', val);
                }} />
              <Range label="图片模糊"
                     onChange={val => {
                       mod.update('blur', val);
                     }}
                     value={mod.blur} />
              <Range label="不透明度"
                     onChange={val => {
                       mod.update('opacity', val);
                     }}
                     value={mod.opacity} />
            </div>
          )
        },
      ]
    };
    return (
      <Group {...groupProps}/>
    );
  }
}
